import * as THREE from 'three';
import { Detector } from '@/utils/detector';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// import gsap from 'gsap'; // 导入动画库
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
// import { texture } from 'three/examples/jsm/nodes/shadernode/ShaderNodeBaseElements'; // 导入hrd需要的依赖

let camera = null; // 相机
let scene = null; // 场景
let renderer = null; // 渲染
// let light = null; // 灯光
// let raycaster = null; // 光线投射
// let mouse = null; // mouse
let controls = null;
// let state = new State(); // 帧率检测
let width = 0;
let height = 0;
let cube = null;
let geometry = null;
let material = null;

export default {
	name: 'car',
	data() {
		return {
			colors: ['red', 'yellow', 'green']
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 换色
		click(color) {
			material.color.set(color);
		},
		init() {
			if (!Detector.webgl) return Detector.addGetWebGLMessage(), alert('不支持webgl'), !1;
			width = this.$refs.car.offsetWidth; // 获取显示宽度和高度
			height = this.$refs.car.offsetHeight;
			scene = new THREE.Scene(); // 建立场景
			this.initScene();
			this.initModel();
			this.initRenderer();
			this.initHdr();
			this.initControls();
			this.render();
		},
		// 模型加载
		initModel() {
			// const size = 30;
			// const divisions = 30;
			//
			// const gridHelper = new THREE.GridHelper( size, divisions );
			// gridHelper.position.set(0, -2.5, 0)
			// scene.add( gridHelper );
			// MeshBasicMaterial: 基本材质 MeshPhysicalMaterial: 高级材质
			geometry = new THREE.BoxGeometry(5, 5, 5);
			material = new THREE.MeshBasicMaterial({
				color: 0xff0000,
				material: 1, // 金属度
				roughness: 0.5, // 粗超程度 - 可以形成漫反射
				// clearcoat: 1, // 设置清漆，形成喷漆的效果
				// clearcoatRoughness: 0,
				sheen: 0.5
			});
			cube = new THREE.Mesh(geometry, material);
			scene.add(cube);
			this.animation();
		},
		// 设置动画
		animation() {
			// let position = camera.position;
			// let animate1 = gsap.to(position, {
			// 	x: 15,
			// 	y: 15,
			// 	duration: 5,
			// 	// repeat: -1, // 重复次数 无限循环-1
			// 	// yoyo: true, // 往返运动
			// 	// delay: 2, // 延迟时间
			// 	ease: 'power1.inOut', // 动画类型
			// 	onComplete: () => {
			// 		// 动画完成回调
			// 		console.log('动画完成');
			// 	},
			// 	onStart: () => {
			// 		// 动画开始回调
			// 		console.log('动画开始');
			// 	}
			// });
		},
		// 光线
		initLight() {
			// 环境光
			let light = new THREE.AmbientLight(0xffffff);
			scene.add(light);
			let directionalLight = new THREE.DirectionalLight('#fff', 1);
			// directionalLight.position.set(100, 50, 100);
			directionalLight.position.set(25, 5, 40);
			directionalLight.castShadow = true;
			directionalLight.shadow.camera.near = 10;
			directionalLight.shadow.camera.far = 200;
			directionalLight.shadow.mapSize.width = 1024;
			directionalLight.shadow.mapSize.height = 1024;
			directionalLight.shadow.camera.top = 6; // 显示位置大小
			directionalLight.shadow.camera.right = 6;
			directionalLight.shadow.camera.left = -20;
			directionalLight.shadow.camera.bottom = -20;
			directionalLight.shadow.radius = 3; // 调整阴影模糊程度，值越大越模糊
			scene.add(directionalLight);
			// 光源的坐标系
			// const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
			// scene.add(directionalLightCameraHelper);
			// 点光源
			// let point = new THREE.PointLight('#fff',0.5);
			// point.position.set(50, 5, 40); //点光源位置
			// point.castShadow = true;
			// scene.add(point); //点光源添加到场景中
			// const pmremGenerator = new THREE.PMREMGenerator(renderer); // 使用hdr作为背景色
			// pmremGenerator.compileEquirectangularShader();
			// const loader = new RGBELoader()
			// const scene = this.scene;
			// loader.setDataType(THREE.UnsignedByteType);
			// loader.load(require('../assets/hdr/u001.hdr'), (texture) => {
			//     console.log(texture)
			//     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
			//     scene.environment = envMap; // 给场景添加环境光效果
			//     // scene.background = envMap; // 给场景添加背景图
			//     texture.dispose()
			//     pmremGenerator.dispose()
			//
			//   });
		},
		// 相机
		initScene() {
			// 相机设置
			let k = width / height; //窗口宽高比
			let s = 10; //三维场景显示范围控制系数，系数越大，显示的范围越大，看到的东西越小
			//创建相机对象（透视相机） - 相机可以缩放显示三维场景、对三维场景的不同角度进行取景显示。
			camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera.position.set(0, 0, 20); //设置相机位置
			camera.lookAt(0, 0, 0); //设置相机方向(指向的场景对象)
		},
		// 渲染器
		initRenderer() {
			renderer = new THREE.WebGLRenderer({
				// alpha: true,
				antialias: true
				// logarithmicDepthBuffer: true,
			});
			renderer.setSize(width, height); //设置渲染区域尺寸
			renderer.setClearColor('#fff', 1); //设置背景颜色
			renderer.setClearAlpha(1); // 背景透明度
			renderer.render(scene, camera);
			renderer.clear(); // 此方法将颜色缓存初始化为当前颜色
			renderer.shadowMap.enabled = true; // 可以渲染阴影
			renderer.getPixelRatio(Math.min(window.devicePixelRatio, 2)); // 设置像素比
			renderer.outputEncoding = THREE.sRGBEncoding;
			this.$refs.car.appendChild(renderer.domElement);
			// document.body.append(state.domElement);
		},
		// hdr文件加载
		initHdr() {
			// 创建加载器
			let hrdLoader = new RGBELoader();
			hrdLoader.loadAsync('model/bg2.hdr').then(texture => {
				console.log(texture);
				console.log(THREE.CubeReflectionMapping);
				texture.encoding = THREE.sRGBEncoding;
				// texture.mapping = THREE.EquirectangularReflectionMapping;
				//将加载的材质texture设置给背景和环境
				scene.background = texture;
				// 给场景所有的物体添加默认的环境贴图
				scene.environment = texture;
			});
		},
		// 鼠标控制 - controls
		initControls() {
			// 控制器 放大倍数  缩小倍数  是否自动旋转及速度
			controls = new OrbitControls(camera, renderer.domElement);
			controls.target.set(0, 0, 0);
			// controls.autoRotate = true;
			// controls.enableDamping = true // 阻尼
			// controls.dampingFactor = 0.5 // 阻尼系数大小控制
			// controls.enablePan = true // 是否开启右键拖拽功能
			// controls.enableZoom = true // 是否可以缩放
			// controls.autoRotate = true // 是否自动旋转
			// controls.autoRotateSpeed = 0.3 // 旋转速度控制
			// controls.minDistance = 1; // 相机距离原点的最近距离
			// controls.maxDistance = 400; // 相机距离原点的最远距离
		},
		// 动画
		render() {
			// 获取时间 - 逐渐增加的时间
			// const elapsed = clock.getElapsedTime();
			renderer.render(scene, camera); // 整体渲染
			controls.update();
			requestAnimationFrame(this.render); //请求再次执行渲染函数render
		}
	}
};
